<template>
	<view style="width: 100%; height: 100%;">
		<view class="main">
			<view class="left">
				<view class="top">
					<image src="../../static/images/logo.png" style="width: 150upx; height: 66upx;"></image>
					<view class="title">類別</view>
				</view>
				<view class="menu-type-list">
					<view v-for="item in menu.list" :key="item.Type_Number" :class="{ 'menu-type-item' : true, 'active' : item.Type_Number === menuType }"
					 @click="selectMenuType(item)">{{item.Type}}</view>
				</view>
			</view>
			<view class="right">
				<view class="top">
					<view class="top-header">
						<view>
							<text>選擇就餐人數:</text>
							<picker class="dropDown" @change="peopleNumberChange" :value="shopInfo.people_number-1" :range="peopleNumberArr"
							 style="margin-left: 20upx;">
								<view class="uni-input">{{shopInfo.people_number}}</view>
								<text class="iconfont icon-xiala"></text>
							</picker>
						</view>
						<view>
							<navigator url="../user/login">
								<view>
									<image :src="request_domain + shopInfo.logo" style="width: 40upx; height: 40upx; vertical-align: middle; margin-right: 10upx;"></image>
									{{shopInfo.shopname}}-{{shopInfo.table_number}}
								</view>
							</navigator>
						</view>
					</view>
					<view class="top-bottom">
						菜品 - {{menu['indexList'][menuType]['Type']}}
					</view>
				</view>
				<view class="menu" >  
					<template v-if="menuData.length">
						<view class="menu-list" style="height: calc(100% - 98upx);">
							<view class="menu-item" v-for="(item, index) in menuData" :key="index">
								<view class="imgBox">
									<image :src="item.image_full_url" style="width: 100%;height:100%" mode="scaleToFill" lazy-load @error="menuImgErr(item)"></image>
								</view>
								<view class="menuText">
									<view class="name">{{item.food_name}}</view>
									<view class="price">$ {{item.price}}</view>
									<view class="note"></view>
									<view class="count">
										<view class="minus" @click="delFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
										<view class="number">{{item.foodQuantity}}</view>
										<view class="plus" @click="addFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<image src="../../static/images/emty-content-icon.png" style="width: 150upx; height: 150upx; display: block; margin: auto; margin-top:20upx;"></image>
						<view style="color: #AAAAAA; text-align: center; padding-top: 40upx;">暫無菜品</view>
					</template>
				</view>
			</view>
		</view>

		<view class="toolbar">
			<view>
				<view v-for="(data,i) in toolbarNav" :key="i" :class="{ current: i === toolbarNavIndex }" @click="toolBarClick(i)">
					<template v-if="data.current=='shopCar'">
						<text :class="data.class">
							<text>{{cartStatistics.cartNum}}</text>
						</text>
					</template>
					<template v-else>
						<text :class="data.class"></text>
					</template>

					<text class="toolbar-text" v-text="data.text"></text>
				</view>
			</view>
		</view>

		<view :class="{ 'cart-mask' : true, 'active' : cartVisible }" @click="cartColse">
			<view class="cart" @click.stop="">
				<view class="cart-title">
					<view>
						購物車
						<text style="font-size: 24upx; margin-left: 10upx;">(已點:{{cartStatistics.cartNum}})</text>
					</view>
					<view class="cart-close" @click="cartColse">關閉</view>
				</view>
				<scroll-view class="cart-list menu">
					<template v-if="cartData.length > 0">
						<view class="menu-list">
							<view class="menu-item" v-for="(item, index) in cartData" :key="index">
								<view class="imgBox">
									<image :src="item.image_full_url" mode="scaleToFill" lazy-load @error="menuImgErr(item)"></image>
								</view>
								<view class="menuText">
									<view class="name">{{item.food_name}}</view>
									<view class="price">$ {{item.price}}</view>
									<view class="note"></view>
									<view class="count">
										<view class="minus" @click="delFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
										<view class="number">{{item.foodQuantity}}</view>
										<view class="plus" @click="addFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<image src="../../static/images/emty-cart-icon.png" style="width: 300upx; height: 300upx; display: block; margin: auto;"></image>
						<view style="color: #AAAAAA; text-align: center; margin-top: -70upx; padding-top: 40upx;">购物车暫無菜品</view>
					</template>
				</scroll-view>
				<view class="cart-footer">
					<view class="left">
						<view class="totalPrice">
							總價：<span>$ {{cartStatistics.totalPrice}}</span>
						</view>
					</view>
					<view class="right">
						<view class="selected" @click="cartConfirm">
							選好了
						</view>
					</view>
				</view>
			</view>
		</view>

		<view :class="{ 'order-confirm' : true, 'active' : orderConfirmVisible }">
			<view class="order-confirm-title">
				<view class="title">確認訂單</view>
				<view class="close">
					<text @click="orderConfirmVisible = false">返回</text>
				</view>
			</view>
			<view class="order-confirm-main">
				<view class="left">
					<view class="detail-item">桌號：{{shopInfo.table_number}}</view>
					<view class="detail-item">已選商品：{{cartStatistics.menuTypeNum}}</view>
					<view class="detail-item">服務費：</view>
					<view class="detail-item">總計：<text style="color:#EF2F34;">$ {{cartStatistics.totalPrice}}</text></view>
					<view class="btn" @click="submitOrder">確認訂單</view>
				</view>
				<scroll-view class="menu">
					<template v-if="cartData.length > 0">
						<view class="menu-list">
							<view class="menu-item" v-for="(item, index) in cartData" :key="index">
								<view class="imgBox">
									<image :src="item.image_full_url" mode="scaleToFill" lazy-load @error="menuImgErr(item)"></image>
								</view>
								<view class="menuText">
									<view class="name">{{item.food_name}}</view>
									<view class="price">$ {{item.price}}</view>
									<view class="note"></view>
									<view class="count">
										<view class="minus" @click="delFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
										<view class="number">{{item.foodQuantity}}</view>
										<view class="plus" @click="addFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<image src="../../static/images/emty-content-icon.png" style="width: 150upx; height: 150upx; display: block; margin: auto; margin-top:40upx;"></image>
						<view style="color: #AAAAAA; text-align: center; padding-top: 40upx;">暫無菜品</view>
					</template>
				</scroll-view>
			</view>
		</view>

		<view :class="{ 'search-modal' : true, 'active' : menuSearchVisible }">
			<view class="search-modal-title">
				<view class="searchNumber"></view>
				<view class="searchInput">
					<view class="search-group">
						<view class="input">
							<input type="text" v-model.trim="menuSearchValue">
						</view>
						<view class="cancle" v-if="menuSearchValue !== ''" @click="menuSearchValue=''"></view>
						<view class="searchIcon"></view>
					</view>
				</view>
				<view class="close">
					<text @click="menuSearchVisible = false">關閉</text>
				</view>
			</view>
			<scroll-view class="menu">
				<template v-if="searchMenuData.length > 0">
					<view class="menu-list">
						<view class="menu-item" v-for="(item, index) in searchMenuData" :key="index">
							<view class="imgBox">
								<image :src="item.image_full_url" mode="scaleToFill" lazy-load @error="menuImgErr(item)"></image>
							</view>
							<view class="menuText">
								<view class="name">{{item.food_name}}</view>
								<view class="price">$ {{item.price}}</view>
								<view class="note"></view>
								<view class="count">
									<view class="minus" @click="delFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
									<view class="number">{{item.foodQuantity}}</view>
									<view class="plus" @click="addFoodToCart(item, menu['indexList'][menuType]['index'], index)"></view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<template v-if="menuSearchValue !== ''">
						<image src="../../static/images/emty-content-icon.png" style="width: 150upx; height: 150upx; display: block; margin: auto; margin-top:40upx;"></image>
						<view style="color: #AAAAAA; text-align: center; padding-top: 40upx;">暫無搜索內容</view>
					</template>
					<template v-else>
						<view style="color: #AAAAAA; text-align: center; padding-top: 40upx;">請輸入關鍵字搜索菜品</view>
					</template>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniDrawer from '../../components/uni/uni-drawer.vue';
	import api from '../../static/js/api.js';

	export default {
		components: {
			uniDrawer,
		},
		data() {
			return {
				menu: {
					indexList: {},
				},
				menuType: '',
				cartVisible: false,
				orderConfirmVisible: false,
				menuSearchVisible: false,
				shopInfo: {
					shopname: '',
					table_number: '',
					people_number: '1',
				},
				peopleNumberArr: [
					'1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
				],
				toolbarNav: [{
						"class": "iconfont icon-home",
						"text": "首頁",
						"current": "index",
						click: function() {

						},
					},
					{
						"class": "iconfont icon-bell",
						"text": "服務鈴",
						"current": "bell",
						click: function() {

						},
					},
					{
						"class": "iconfont icon-gouwuche",
						"text": "購物車",
						"current": "shopCar",
						click: function() {
							this.cartVisible = true;
						},
					},
					{
						"class": "iconfont icon-search",
						"text": "搜索",
						"current": "searchBox",
						click: function() {
							this.menuSearchVisible = true;
							this.toolbarNavIndex = 0;
							this.menuSearchValue = '';
						},
					},
					{
						"class": "iconfont icon-dingdan",
						"text": "訂單",
						"current": "padOrderedList",
						click: function() {
							uni.navigateTo({
								url: `../order/detail?key=${this.shopInfo.key}&saleflow=${this.shopInfo.saleflow}`,
								animationType: 'slide-in-bottom',
							});
							this.toolbarNavIndex = 0;
						},
					},
				],
				toolbarNavIndex: 0,
				menuSearchValue: '',
			}
		},
		onLoad(params) {
			let self = this;
			api.request('/wechat/api/GetTableState.ashx', {
				data: {
					key: params.key,
					tablenb: params.tablenb,
					id: params.id,
				},
				success(data) {
					data['logo'] = data['logo'].replace(/\\/g, '/');
					self.shopInfo = data;
				},
			});
			api.request('/wechat/api/GetFoodList.ashx', {
				data: {
					key: params.key,
				},
				success(data) {
					// http://catering.miraclegenesis.cn:9090/wechat/api/GetPackageFoods.ashx?key=00000001
					let newData = Object.assign({}, data);
					if (data['list'].length > 0) {
						self.menuType = data['list'][0]['Type_Number'];
					}
					newData['indexList'] = {};
					for (let i = 0; i < data['list'].length; i++) {
						for (let foodIndex = 0; foodIndex < data['list'][i]['Data'].length; foodIndex++) {
							data['list'][i]['Data'][foodIndex]['image_full_url'] = self.request_domain + '/getimg/' + data['list'][i][
								'Data'
							][foodIndex]['image_url'];
							data['list'][i]['Data'][foodIndex]['foodQuantity'] = 0;
						}
						data['list'][i]['index'] = i;
						newData['indexList'][data['list'][i]['Type_Number']] = data['list'][i];
					}
					self.menu = newData;

					self.refushCart();
				},
			});
		},
		onBackPress(form) {
			if (this.cartVisible || this.orderConfirmVisible || this.menuSearchVisible) {
				this.cartVisible = false;
				this.orderConfirmVisible = false;
				this.menuSearchVisible = false;
				this.toolbarNavIndex = 0;
			}
			return true;
		},
		computed: {
			...mapState(['request_domain']),
			menuData() {
				return this.menu['indexList'][this.menuType] ? this.menu['indexList'][this.menuType]['Data'] : [];
			},
			cartData() {
				let data = [];
				for (let menuTpe in this.menu['indexList']) {
					for (let menuIndex in this.menu['indexList'][menuTpe]['Data']) {
						if (this.menu['indexList'][menuTpe]['Data'][menuIndex]['foodQuantity'] > 0) {
							data.push(this.menu['indexList'][menuTpe]['Data'][menuIndex]);
						}
					}
				}
				return data;
			},
			cartStatistics() {
				let data = this.cartData;
				let statistics = {
					cartNum: 0,
					totalPrice: 0,
					menuTypeNum: 0,
				};
				if (!data) return statistics;

				for (let index in data) {
					statistics.cartNum += data[index]['foodQuantity'];
					statistics.totalPrice += (data[index]['foodQuantity'] * data[index]['price']);
				}
				statistics.menuTypeNum = data.length;
				return statistics;
			},
			searchMenuData() {
				let searchValue = this.menuSearchValue;
				let data = [];
				if (searchValue === '') return data;

				for (let menuType in this.menu['indexList']) {
					for (let index in this.menu['indexList'][menuType]['Data']) {
						if (this.menu['indexList'][menuType]['Data'][index]['food_name'].indexOf(searchValue) !== -1) {
							data.push(this.menu['indexList'][menuType]['Data'][index]);
						}
					}
				}
				return data;
			},
		},
		methods: {
			toolBarClick(index) {
				this.toolbarNavIndex = index;
				this.toolbarNav[index].click.call(this);
			},
			peopleNumberChange(event) {
				let self = this;
				let value = self.peopleNumberArr[parseInt(event['detail']['value'])];
				uni.showLoading({});
				api.request('/wechat/api/UpdateDiningPeople.ashx', {
					data: {
						key: self.shopInfo['key'],
						saleflow: self.shopInfo['saleflow'],
						tablenb: self.shopInfo['table_number'],
						dining_people: value,
					},
					success(data) {
						self.shopInfo.people_number = value;
						uni.hideLoading();
					},
					fail() {
						uni.hideLoading();
					},
				});
			},
			selectMenuType(item) {
				this.menuType = item['Type_Number'];
			},
			initCartData(data) {
				let self = this;
				for (let typeNumber in self.menu['indexList']) {
					for (let i in self.menu['indexList'][typeNumber]['Data']) {
						self.menu['indexList'][typeNumber]['Data'][i]['foodQuantity'] = 0;
						delete self.menu['indexList'][typeNumber]['Data'][i]['cartData'];
					}
				}
				for(let i = 0; i < data['Data'].length; i++){
					let quantity = parseFloat(data['Data'][i]['number']);
					let typeNumber = self.menu['list'][data['Data'][i]['typeIndex']]['Type_Number'];
					self.menu['indexList'][typeNumber]['Data'][data['Data'][i]['index']]['foodQuantity'] = quantity;
					self.menu['indexList'][typeNumber]['Data'][data['Data'][i]['index']]['cartData'] = data['Data'][i];
				}
			},
			refushCart() {
				let self = this;
				api.request('/wechat/api/GetCartFoods.ashx', {
					data: {
						key: self.shopInfo['key'],
						saleflow: self.shopInfo['saleflow'],
					},
					success(data) {
						self.initCartData(data);
					},
				});
			},
			addFoodToCart(item, typeIndex, index) {
				let self = this;
				uni.showLoading({
					mask: true,
				});
				api.request('/wechat/api/AddFoodToCart.ashx', {
					type: 'POST',
					data: {
						"key": self.shopInfo['key'],
						"saleflow": self.shopInfo['saleflow'],
						"food": {
							"single": "0",
							"food_number": item['food_number'],
							"food_quantity": 1,
							"food_price": item['price'],
							"food_money": item['price'],
							"practice": '',
							"packagenb": item['price_type'],
							"persent": "1.0",
							"typeIndex": typeIndex,
							"index": index,
							//"formatIndex": formatIndex,
							//"total": this.total,
							//"totalPrice": this.totalPrice
						},
					},
					success(data) {
						console.log(data)
						self.initCartData(data);
						uni.hideLoading();
					},
					fail(err) {
						console.log(err)
						uni.hideLoading();
					},
				});
			},
			delFoodToCart(item, typeIndex, index) {
				console.log("sss"+item)
				if (item.foodQuantity <= 0) return;
				console.log(item)
				let self = this;
				uni.showLoading({
					mask: true,
				});
				api.request('/wechat/api/DeleteFoodFromCart.ashx', {
					data: {
						"key": self.shopInfo['key'],
						"saleflow": self.shopInfo['saleflow'],
						"food_number": item['food_number'],
						"id": item['cartData']['id'],
					},
					success(data) {
						self.initCartData(data);
						uni.hideLoading();
					},
					fail(data) {
						uni.hideLoading();
					},
				});
			},
			cartColse() {
				this.cartVisible = false;
				this.toolbarNavIndex = 0;
			},
			cartConfirm() {
				let cartData = this.cartData;
				if (cartData.length <= 0) {
					uni.showToast({
						title: '請將您的菜加入購物車',
						icon: 'none',
					});
					return;
				}

				this.cartColse();
				this.orderConfirmVisible = true;
			},
			submitOrder() {
				let self = this;
				let foods = [];
				let cartData = this.cartData;
				if (cartData.length <= 0) {
					uni.showToast({
						title: '請添加您的菜品',
						icon: 'none',
					});
					this.orderConfirmVisible = false;
					return;
				}
				for (let i = 0; i < cartData.length; i++) {
					foods.push({
						"single": "0",
						"food_number": cartData[i]['cartData']['food_number'],
						"food_quantity": cartData[i]['cartData']['number'],
						"food_price": cartData[i]['cartData']['price'],
						"food_money": (parseFloat(cartData[i]['cartData']['number']) * parseFloat(cartData[i]['cartData']['price'])),
						"practice": "",
						// "practice": this.menu[i].Data[j].note,
						"packagenb": cartData[i]['cartData']['price_type'],
						"persent": "1.0",
						"food_name": cartData[i]['cartData']['name'],
						"id": cartData[i]['cartData']['id'],
					});
				}
				api.request('/wechat/api/SubmitFoods.ashx', {
					type: 'POST',
					data: {
						'key': this.shopInfo['key'],
						'saleflow': this.shopInfo['saleflow'],
						'number': '',
						'pos_nb': '',
						'foods': foods,
					},
					success(data) {
						self.orderConfirmVisible = false;
						self.refushCart();
					},
					fail(data) {
						console.log(data);
					},
				})
			},
			menuImgErr(item) {
				item.image_full_url = require('../../static/images/default-menu-img.png');
			},
		},
	}
</script>

<style lang="scss">
	.main {
		width: 100%;
		height: 100%;
		float: left;
		// padding-bottom: 100upx;
		display: flex;

		.left {
			width: 200upx;
			height: 100%;
			flex: none;
			flat: left;
			display: flex;
			flex-direction: column;

			.top {
				flex: none;
				padding: 20upx 40upx;

				.title {
					font-size: 32upx;
					color: #666666;
				}
			}

			.menu-type-list {
				flex: 1;
				overflow: auto;
				padding-left: 20upx;

				.menu-type-item {
					font-size: 25upx;
					padding: 10upx 0;
					color: #888888;
					list-style: none;
					border-bottom: 1px solid #888;

					&.active {
						color: #FFC001;
						border-bottom: 1px solid #FFC001;
					}
				}
			}
		}

		.right {
			flex: 1;
			float: left;
			padding-left: 20upx;
			padding-right: 20upx;
			display: flex;
			flex-direction: column;

			.top {
				padding-top: 10upx;

				.top-header {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					font-size: 28upx;

					>view {
						margin-left: 20upx;
					}

					.dropDown {
						width: 100upx;
						height: 40upx;
						text-align: center;
						position: relative;
						z-index: 100;
						border: 1px solid #666666;
						border-radius: 5upx;
						font-size: 28upx;
						display: inline-block;
						/*margin-left: px2rem(30px);
						margin-top: px2rem(-10px);
						line-height: px2rem(60px); */

						.iconfont {
							position: absolute;
							right: 7upx;
							top: 10upx;
							font-size: 20upx;
						}
					}
				}

				.top-bottom {
					margin-bottom: 20upx;
				}
			}

// 			.menu {
// 				width: 100%;
// 				height: 100%;
// 				overflow: scroll;
// 
// 				.menu-list {
// 					width: 100%;
// 					height: 100%;
// 					overflow: scroll;
// 
// 					.menu-item {
// 						width: 32%;
// 						box-sizing: border-box;
// 						padding: 10upx 10upx;
// 						margin-left: 1%;
// 						border-radius: 5px;
// 						box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
// 						height: 150upx;
// 						background: #007AFF;
// 						display: flex;
// 						flex-direction: row;
// 
// 						.imgBox {
// 							width: 130upx;
// 							height: 130upx;
// 
// 						}
// 
// 						.menuText {
// 							width: calc(100% - 150upx);
// 							height: 100%;
// 						}
// 					}
// 				}
// 			}
		}
	}



	.toolbar {
		width: 100%;
		height: 98upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 24px 0px rgba(70, 70, 70, 0.22);
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 99;

		view {
			display: flex;
			width: 100%;
			margin: 0;
			padding: 0;

			view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;

				&.current {
					color: #EF2F34;
				}

				.iconfont {
					font-size: 40upx;
					position: relative;

					text {
						position: absolute;
						top: 0;
						right: -14upx;
						color: #fff;
						width: 28upx;
						height: 28upx;
						line-height: 28upx;
						font-size: 24upx;
						border-radius: 50%;
						background-color: #EF2F34;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}

				.toolbar-text {
					font-size: 24upx;
				}
			}
		}
	}

	.cart-mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 999;
		transition: background 0.5s;

		&.active {
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.cart {
				right: 0;
			}
		}

		.cart {
			width: 500upx;
			height: 100%;
			overflow: hidden;
			position: absolute;
			top: 0;
			right: -3000px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding: 20upx 40upx;
			font-size: 28upx;
			transition: all 0.5s;

			.cart-title {
				flex: none;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 10upx;
				/* font-size: px2rem(42px);
				margin-bottom: px2rem(75px);
				padding: 0 px2rem(90px); */

				span {
					/* font-size: px2rem(36px); */
				}

				div:nth-child(1) {
					/* font-size: px2rem(52px); */
					color: #666666;
				}

				.cart-close {
					color: #333;
					font-size: 24upx;
					border-bottom: 2px solid #EF2F34;
					padding-bottom: 10upx;
				}
			}

			.cart-list {
				.menu-list {

					.menu-item {
						width: 100%;
					}
				}
			}

			.cart-footer {
				flex: none;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24upx;
				/* height: px2rem(148px);
				padding: 0 px2rem(90px); */
				box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 1);
				position: relative;
				padding-top: 20upx;

				.left {
					flex: 1;

					.totalNumber {
						color: #666666;
						/* margin-bottom: px2rem(16px); */
					}

					.totalPrice {
						color: #EF2F34;

						span {
							/* font-size: px2rem(44px); */
						}
					}
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.selected {
						width: 100upx;
						height: 40upx;
						background-color: #EF2F34;
						border-radius: 5upx;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.order-confirm {
		width: 100%;
		height: 100%;
		background-color: #FFF;
		position: fixed;
		top: 100%;
		left: 0;
		transition: all 0.5s;
		z-index: 102;
		display: flex;
		flex-direction: column;

		&.active {
			top: 0;
		}

		.order-confirm-title::before {
			content: "";
			flex: 1;
		}

		.order-confirm-title {
			height: 80upx;
			flex: none;
			/* padding: px2rem(50px) px2rem(100px); */
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0px 0px 24px 0px rgba(70, 70, 70, 0.22);
			background-color: #fff;

			.title {
				flex: 1;
				color: #666666;
				/* font-size: px2rem(52px); */
				text-align: center;
			}

			.close {
				flex: 1;
				color: #333333;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20upx;
				font-size: 24upx;

				text {
					border-bottom: 1px solid #EF2F34;
					padding-bottom: 5upx;
				}
			}
		}

		.order-confirm-main {
			flex: 1;
			padding: 20upx 40upx;
			display: flex;

			.left {
				width: 250upx;
				flex: none;
				font-size: 28upx;
				color: #888888;
				border-right: 1px solid #aaa;
				padding-top: 20upx;
				padding-right: 40upx;

				.detail-item {
					border-bottom: 1px solid #AAAAAA;
					padding: 20upx 0;
				}

				.btn {
					width: 150upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #EF2F34;
					color: #fff;
					border-radius: 5upx;
					margin-top: 20upx;
				}
			}

			.menu {
				margin-left: 20upx;
			}
		}
	}

	.search-modal {
		width: 100%;
		height: 100%;
		/* padding-bottom: px2rem(148px); */
		position: fixed;
		top: 100%;
		left: 0;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		z-index: 101;
		transition: all 0.5s;

		&.active {
			top: 0;
		}

		.search-modal-title {
			flex: none;
			height: 80upx;
			/* height: px2rem(148px);
			padding: px2rem(50px) px2rem(100px); */
			padding: 40upx 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0px 0px 24px 0px rgba(70, 70, 70, 0.22);
			color: #666666;
			/* font-size: px2rem(42px); */
			background-color: #fff;

			.searchNumber {
				flex: 1;
				// background: url(../image/searchNumber.png) no-repeat;
				background-size: contain;
				/* padding-left: px2rem(97px); */
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.searchInput {
				flex: 1;

				.search-group {
					position: relative;

					.input {
						width: 100%;
						height: 60upx;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 0px 10px 0px rgba(22, 22, 22, 0.2) inset;
						border-radius: 5upx;
						padding-left: 50upx;
						padding-right: 50upx;
						display: flex;
						align-items: center;
						font-size: 28upx;

						input {
							border: none;
							flex: 1;
						}
					}

					.searchIcon {
						width: 20upx;
						height: 46upx;
						background: url('../../static/images/search-icon.png') no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 15upx;
						top: 5upx;
					}

					.cancle {
						width: 30upx;
						height: 30upx;
						background: url('../../static/images/text-clear-icon.png') no-repeat;
						background-size: 100% 100%;
						position: absolute;
						right: 10upx;
						top: 15upx;
					}
				}
			}

			.close {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 24upx;

				text {
					color: #333333;
					border-bottom: 2px solid #EF2F34;
					padding-bottom: 5upx;
				}
			}
		}

		// .menu{
		// 	margin: 20upx;
		// 	background: #007AFF;
		// 	overflow:scroll;
		// 	.menu-list{
		// 		.menu-item{
		// 			width: 20%;
		// 			background: #007AFF;
		// 			.imgBox {
		// 				width: 100upx;
		// 				background: #007AFF;	
		// 				height: 100upx;
		// 			}
		// 		} 
		// 	}
		// }
	
	}
</style>
